import { useState, useEffect } from 'react';

export type Orientation = 'portrait' | 'landscape';

/**
 * useOrientation Hook
 * 检测屏幕方向（portrait/landscape）
 *
 * @returns 当前屏幕方向
 *
 * 支持两种检测方式：
 * 1. Screen Orientation API（现代浏览器）
 * 2. 窗口尺寸比较（兼容性方案）
 */
export const useOrientation = (): Orientation => {
  const [orientation, setOrientation] = useState<Orientation>(() => {
    if (typeof window === 'undefined') return 'portrait';

    // 优先使用 Screen Orientation API
    if (window.screen?.orientation) {
      return window.screen.orientation.type.startsWith('portrait')
        ? 'portrait'
        : 'landscape';
    }

    // 降级方案：比较窗口尺寸
    return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
  });

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const updateOrientation = () => {
      let newOrientation: Orientation;

      // 优先使用 Screen Orientation API
      if (window.screen?.orientation) {
        newOrientation = window.screen.orientation.type.startsWith('portrait')
          ? 'portrait'
          : 'landscape';
      } else {
        // 降级方案
        newOrientation = window.innerHeight > window.innerWidth
          ? 'portrait'
          : 'landscape';
      }

      setOrientation(newOrientation);
    };

    // 监听 orientationchange 事件（移动设备）
    if (window.screen?.orientation) {
      window.screen.orientation.addEventListener('change', updateOrientation);
    } else {
      // 降级：监听 resize 事件
      let timeoutId: NodeJS.Timeout;
      const debouncedUpdate = () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(updateOrientation, 300);
      };

      window.addEventListener('resize', debouncedUpdate);

      return () => {
        clearTimeout(timeoutId);
        window.removeEventListener('resize', debouncedUpdate);
      };
    }

    return () => {
      if (window.screen?.orientation) {
        window.screen.orientation.removeEventListener('change', updateOrientation);
      }
    };
  }, []);

  return orientation;
};
